<template>
  <div>
    <van-cell is-link title="基础用法" @click="show = true" />
    <van-action-sheet v-model:show="show" @select="onSelect">
      <ul>
        <li v-for="item in actions" :key="item.name">{{ item.name }}</li>
      </ul>
    </van-action-sheet>
  </div>
</template>
<script lang="ts" setup>
defineOptions({
  name: 'Home'
});

const show = ref(false);
const actions = [
  { name: '选项一' },
  { name: '选项二' },
  { name: '选项三' },
  { name: '选项4' },
  { name: '选项5' },
  { name: '选项6' }
];
const onSelect = item => {
  // 默认情况下点击选项时不会自动收起
  // 可以通过 close-on-click-action 属性开启自动收起
  show.value = false;
  showToast(item.name);
};
</script>
<style lang="scss" scoped>
div {
  font-size: 24px;
}
</style>
